<script setup>
import { onBeforeMount, reactive, ref, toRefs } from "vue";
import {
  getClusterListHandler as getListHandler,
  getDetailHandler as getDetail,
  deleteClusterHandler as deleteHandler,
} from "../../api/cluster.js";
import { ElMessage, ElMessageBox } from "element-plus";
import Add from "./Add.vue";
import { Close, Check } from "@element-plus/icons-vue";

const addClusterDialog = ref(false);
const defaultMethod = ref("Create");
const data = reactive({
  items: [],
  itemForm: {
    id: "",
    displayName: "",
    city: "",
    district: "",
    kubeconfig: "",
  },
});

const loading = ref(true);

// 获取集群列表
const getList = () => {
  loading.value = true;
  getListHandler().then((response) => {
    console.log("response:", response.data.data.items);
    data.items = response.data.data.items;
    loading.value = false;
  });
};

// 删除集群
const deleteItem = (row) => {
  console.log("当前行的数据：", row);
  ElMessageBox.confirm("确定要删除：" + row.id, {
    confirmButtonText: "确认删除",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      loading.value = true;
      deleteHandler(row.id).then((response) => {
        console.log("response:", response.data.message);
        ElMessage({
          message: response.data.message,
          type: "success",
        });
        getList();
      });
    })
    .catch(() => {
      return;
    });
};
const addCluster = () => {
  data.itemForm = {};
  defaultMethod.value = "Create";
  addClusterDialog.value = true;
};

// 编辑
const editCluster = (id) => {
  console.log("ro123w: ", id);
  loading.value = true;
  getDetail(id).then((response) => {
    // 查询到数据以后，把数据赋值给我们的itemForm
    data.itemForm = response.data.data.item;
    // 编辑dialog给打开
    defaultMethod.value = "Edit";
    addClusterDialog.value = true;
    loading.value = false;
  });
};
onBeforeMount(() => {
  getList();
});
const { items, itemForm } = toRefs(data);
const closeDialog = () => {
  getList();
};
const rollback = () => {
  addClusterDialog.value = false;
  getList();
};
</script>

<template>
  <el-card
    class="box-card"
  >
    <template #header>
      <div class="card-header">
        <span>集群列表</span>
        <el-button @click="addCluster()" class="button" type="primary"
          >添加</el-button
        >
      </div>
    </template>
    <el-table border height="480" :data="items" style="width: 100%">
      <el-table-column fixed prop="" align="center" label="集群ID" width="180" sortable>
        <template #default="scope">
          <router-link
            v-if="scope.row.status == 'Active'"
            :to="{ path: '/cluster/detail', query: { id: scope.row.id } }"
            >{{ scope.row.id }}</router-link
          >
          <span v-else style="color: red">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="displayName"
        align="center"
        label="集群别名"
        width="180"
      />
      <el-table-column
        prop="version"
        align="center"
        label="版本"
        width="100"
        sortable
      />
      <el-table-column prop="" align="center" label="位置" width="180">
        <template #default="scope">
          {{ scope.row.city }} - {{ scope.row.district }}
        </template>
      </el-table-column>
      <el-table-column prop="" align="center" label="状态" width="80" sortable>
        <template #default="scope">
          <el-icon v-if="scope.row.status == 'Active'" color="green"
            ><Check
          /></el-icon>
          <el-icon v-else color="red"><Close /></el-icon>
        </template>
      </el-table-column>
      <el-table-column
        prop="version"
        label="集群规模"
        align="center"
        width="100"
        sortable
      ></el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template #default="scope">
          <el-button
            :disabled="scope.row.status != 'Active'"
            link
            type="primary"
            size="small"
            @click="editCluster(scope.row.id)"
            >编辑</el-button
          >
          <el-button
            link
            type="warning"
            size="small"
            @click="deleteItem(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 尾部的布局 -->
    <div class="auto-space-between" style="margin-top: 10px">
      <div>总数：{{ items.length }}</div>
    </div>
  </el-card>
  <el-dialog
    destroy-on-close
    @close="closeDialog"
    v-model="addClusterDialog"
    :title="defaultMethod == 'Create' ? '添加集群' : '更新集群'"
    width="50%"
  >
    <Add
      :item-form="itemForm"
      :method="defaultMethod"
      @rollback="rollback()"
    ></Add>
  </el-dialog>
</template>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
</style>